<template>
  <div class="dialog">
    <el-dialog
      :title="this.title"
      :visible="this.visible"
      :width="this.width"
      :close-on-click-modal="false"
      :before-close="cancel"
      append-to-body
    >
      <div class="subTitle">(&nbsp;{{this.subTitle}}&nbsp;)</div>
      <slot />
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'Dialog',
  props: {
    title: {
      type: String,
      default: '提示'
    },
    subTitle: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '700px'
    }
  },
  data () {
    return {
      // visible: this.visible
    }
  },
  methods: {
    // 关闭
    cancel () {
      this.$emit('handleClose')
    },
    // 确定
    confirm () {
      this.$emit('handleConfirm')
    }
  }
}
</script>

<style lang="less" scoped>
@import '~style/less_vars.less';

.subTitle {
  color: @text-color;
  font-style: italic;
}

/deep/.el-button--primary {
  background-color: #08816f;
  border-color: #0a9480;
}
</style>
